<template>
  <div class="tag-sidebar">
    <div class="tag-header">
      <div>标签</div>
      <Button @click="addTagModal = true" class="add-tag-btn" type="ghost" size="small"><Icon type="ios-pricetags-outline" size='20px' ></Icon>+</Button>

      <Modal v-model="addTagModal" title="输入标签标题" ref="addNewTagModalRef">
        <Form ref="addNewTagForm" :model="newTag" :rules="addNewTagRule" inline>
          <FormItem prop="title" class="input-line">
            <Input type="text" v-model="newTag.name" placeholder="输入标签标题">
              <Icon type="ios-paper" slot="prepend"></Icon>
            </Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <i-button type="primary" size="large" @click="addNewTagOk('addNewTagForm')">提交</i-button>
          <i-button type="error" size="large" @click="addNewTagCancel('addNewTagForm')">取消</i-button>
        </div>
      </Modal>
    </div>
    <ul class="tag-list">
      <li @click="doRouterCurrentTag(tag.id, index)" v-for="(tag, index) in tagList" :key="tag.id">
        <Tag :color="tagColor[index % tagColor.length]">{{ tag.name }}</Tag>
      </li>
    </ul>
  </div>
</template>

<script>
  import {getPrincipalInStore} from "../common/js/auth";

  export default {
    name: 'TagSiderbar',
    created() {
      this.$Loading.start();
      let principal = getPrincipalInStore();
      if (principal) {
        this.$store.commit('changeIsLogin', true);
        this.$store.commit('setUsername', principal.username);
        this.$Loading.finish();
      } else {
        this.$Message.error('没有权限-请先登录');
        this.$router.push('/login');
      }

      this._getTagList();
    },
    data() {
      return {
        tagColor: ['magenta', 'red', 'orange', 'gold',
          'yellow', 'lime', 'green', 'cyan', 'blue', 'purple', '#FFA2D3'],

        tagList: [],
        tagTotal: 0,
        searchedTagList: {},
        addTagModal: false,
        currentTag: {},
        newTag: {
          name: '',
        },

        liIndex: -1,

        addNewTagRule: {

        },
      }
    },
    computed: {
    },
    methods: {

      addNewTagOk(model) {
        this.$refs[model].validate(valid => {
          if (valid) {
            this.postJSON(this.$urlApi.SAVE_TAG, this.newTag).then(res => {
              this._getTagList();
              this.$refs[model].resetFields();
              this.addTagModal = false;
            }).catch(err => {
              console.log(err);
            });
          } else {
            return false;
          }
        });
      },

      addNewTagCancel(model) {
        this.$refs[model].resetFields();
        this.addTagModal = false;
      },

      doRouterCurrentTag(tagId, index) {

      },

      _getTagList() {
        this.postJSON(this.$urlApi.QUERY_TAG_LIST).then(res => {
          this.tagList = res.data;
          this.tagTotal = this.tagList.length;
          this.searchedTagList = this.tagList;
        }).catch(err => {
          console.log(err);
        });
      },
    }
  }
</script>


<style lang="stylus" scoped>
  @import '../common/stylus/variables.styl';
  @import '../common/stylus/styles.styl';
  .tag-sidebar
    width 300px
    max-height 100%
    overflow auto
    background-color $tagbook-bg
    margin-left 100px
    border-right 1px solid $line-color
    .tag-header
      text-align center
      padding 15px 0
      border-bottom 1px solid $line-color
      position relative
      .add-tag-btn
        position absolute
        right 5px
        top 12px
    .tag-tab
      display flex
      font-size 14px
      border-bottom 1px solid $line-color
      .update-time-tab, .title-tab
        padding 10px
        flex 1
      .update-time-tab
        border-right 1px solid $line-color
    .tag-list
      font-size 13px
      .tag-item
        display flex
        padding 10px
        border-bottom 1px solid $line-color
        cursor pointer
        transition all .3s
        &.tag-item-active
          background-color $theme-color
          color #fff
        &:hover
          background-color $theme-color
          color #fff
        .tag-update-time, .tag-title
          flex 1
        .tag-title
          padding-left 20px

  .input-line
    width 100%
    margin-bottom 10px
</style>
